<template>
  <div class="file-info-container">
    <!-- 页面标题 -->
    <el-page-header @back="goBack" content="文件信息查看器">
    </el-page-header>

    <!-- 查询表单 -->
    <el-card class="property-card">
      <div slot="header">
        <span>查询文件信息</span>
      </div>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="文件路径">
          <el-input 
            v-model="queryForm.folderPath" 
            placeholder="请输入文件或文件夹路径"
            style="width: 300px;">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getFileInfo" :loading="loading">
            <i class="el-icon-search"></i> 查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 服务器信息 -->
    <el-card v-if="fileData" class="property-card">
      <div slot="header">
        <span>服务器信息</span>
      </div>
      <div class="property-item">
        <span class="property-label">服务器IP:</span>
        <span class="property-value">{{ fileData.serverIp }}</span>
      </div>
      <div class="property-item">
        <span class="property-label">查询路径:</span>
        <span class="property-value">{{ fileData.folderPath }}</span>
      </div>
      <div class="property-item">
        <span class="property-label">状态:</span>
        <el-tag :type="fileData.status === '1' ? 'success' : 'danger'">
          {{ fileData.status === '1' ? '成功' : '失败' }}
        </el-tag>
      </div>
    </el-card>

    <!-- 文件树形结构 -->
    <el-card v-if="fileData && fileData.data" class="file-tree">
      <div slot="header">
        <span>文件结构</span>
        <el-button 
          v-if="!fileData.data.isDirectory"
          style="float: right; padding: 3px 0" 
          type="text" 
          @click="downloadFile(fileData.data)">
          <i class="el-icon-download"></i> 下载文件
        </el-button>
      </div>
      
      <!-- 根节点信息 -->
      <div style="margin-bottom: 20px;">
        <file-info-item 
          :item="fileData.data" 
          :server-ip="fileData.serverIp"
          @download="downloadFile">
        </file-info-item>
      </div>

      <!-- 树形结构 -->
      <el-tree
        v-if="fileData.data.children && fileData.data.children.length > 0"
        :data="[fileData.data]"
        :props="treeProps"
        :expand-on-click-node="false"
        default-expand-all>
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <tree-node-item 
            :item="data" 
            :server-ip="fileData.serverIp"
            @download="downloadFile">
          </tree-node-item>
        </span>
      </el-tree>
    </el-card>

    <!-- 空状态 -->
    <el-empty v-if="!fileData && !loading" description="请输入路径查询文件信息"></el-empty>
  </div>
</template>

<script>
import axios from 'axios'
import TreeNodeItem from './TreeNodeItem.vue'
import FileInfoItem from './FileInfoItem.vue'

export default {
  name: "FileInfo",
  components: {
    TreeNodeItem,
    FileInfoItem
  },
  data() {
    return {
      queryForm: {
        folderPath: '/ydTest'
      },
      fileData: null,
      loading: false,
      treeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    async getFileInfo() {
      if (!this.queryForm.folderPath.trim()) {
        this.$message.warning('请输入文件路径');
        return;
      }

      this.loading = true;

      try {
        const response = await axios.get('/file/info', {
          params: {
            folderPath: this.queryForm.folderPath
          }
        });
        
        if (response.data.code === 200) {
          this.fileData = response.data.data;
          this.$message.success('获取文件信息成功');
        } else {
          this.$message.error(response.data.msg || '获取文件信息失败');
        }
      } catch (error) {
        console.error('获取文件信息失败:', error);
        this.$message.error('获取文件信息失败: ' + error.message);
      } finally {
        this.loading = false;
      }
    },
    
    downloadFile(fileItem) {
      if (fileItem.isDirectory) {
        this.$message.warning('无法下载文件夹');
        return;
      }
      
      // 构建下载URL
      const downloadUrl = `/file/download?serverIp=${this.fileData.serverIp}&filePath=${encodeURIComponent(fileItem.path)}`;
      
      // 创建隐藏的下载链接
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = fileItem.name;
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      this.$message.success('开始下载文件: ' + fileItem.name);
    },
    
    goBack() {
      window.history.back();
    }
  },
  
  mounted() {
    // 页面加载时自动查询默认路径
    this.getFileInfo();
  }
}
</script>

<style scoped lang="scss">
.file-info-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.file-tree {
  margin-top: 20px;
}

.file-icon {
  margin-right: 8px;
}

.file-size {
  color: #909399;
  font-size: 12px;
}

.file-time {
  color: #909399;
  font-size: 12px;
}

.file-permissions {
  font-family: monospace;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.download-btn {
  margin-left: 10px;
}

.property-card {
  margin-bottom: 20px;
}

.property-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;

  &:last-child {
    border-bottom: none;
  }
}

.property-label {
  font-weight: 500;
  color: #606266;
  min-width: 100px;
}

.property-value {
  color: #303133;
  word-break: break-all;
}
</style>